<template>
  <div class="geDan_container">
    <!-- this have some question -->
    <!-- <el-backtop :visibility-height="heights" target=".geDan_container">
      <i class="el-icon-caret-top"></i>
    </el-backtop> -->
    <div class="geDan_container_head">
      <div class="geDanTags_list_left">
        <div class="select" @click="openPopu">
          <span>{{ tagsArrayName }}</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <transition name="el-fade-in">
          <div class="allGeDan" v-show="show">
            <div class="allGeDan_title">全部歌单</div>
            <div class="allGeDan_container">
              <div class="allGeDan_container_inside" style="margin-top: 20px">
                <div class="allGeDan_container_inside_left">
                  <i class="el-icon-chat-dot-round"></i>
                  <span>语种</span>
                </div>
                <div class="allGeDan_container_inside_right" style="width: 60%">
                  <span
                    :class="{
                      geDanTags_list_span_active:
                        yuZhongArray[index].name == tagsArrayName,
                    }"
                    @click="changeInfo(item.name)"
                    v-for="(item, index) in yuZhongArray"
                    :key="item.id"
                    >{{ item.name }}</span
                  >
                </div>
              </div>
              <div class="allGeDan_container_inside">
                <div class="allGeDan_container_inside_left">
                  <i class="el-icon-suitcase-1"></i>
                  <span>风格</span>
                </div>
                <div
                  class="allGeDan_container_inside_right"
                  style="height: 100px"
                >
                  <span
                    :class="{
                      geDanTags_list_span_active:
                        fengGeArray[index].name == tagsArrayName,
                    }"
                    @click="changeInfo(item.name)"
                    v-for="(item, index) in fengGeArray"
                    :key="item.id"
                    >{{ item.name }}</span
                  >
                </div>
              </div>
              <div class="allGeDan_container_inside">
                <div class="allGeDan_container_inside_left">
                  <i class="el-icon-burger"></i>
                  <span>场景</span>
                </div>
                <div class="allGeDan_container_inside_other">
                  <span
                    :class="{
                      geDanTags_list_span_active:
                        changJingArray[index].name == tagsArrayName,
                    }"
                    @click="changeInfo(item.name)"
                    v-for="(item, index) in changJingArray"
                    :key="item.id"
                    >{{ item.name }}</span
                  >
                </div>
              </div>
              <div class="allGeDan_container_inside">
                <div class="allGeDan_container_inside_left">
                  <i class="el-icon-magic-stick"></i>
                  <span>情感</span>
                </div>
                <div
                  class="allGeDan_container_inside_other"
                  style="width: 17.5%"
                >
                  <span
                    :class="{
                      geDanTags_list_span_active:
                        qingGanArray[index].name == tagsArrayName,
                    }"
                    @click="changeInfo(item.name)"
                    v-for="(item, index) in qingGanArray"
                    :key="item.id"
                    >{{ item.name }}</span
                  >
                </div>
              </div>
              <div class="allGeDan_container_inside">
                <div class="allGeDan_container_inside_left">
                  <i class="el-icon-chat-line-square"></i>
                  <span>主题</span>
                </div>
                <div
                  class="allGeDan_container_inside_other"
                  style="width: 22.5%"
                >
                  <span
                    :class="{
                      geDanTags_list_span_active:
                        zhuTiArray[index].name == tagsArrayName,
                    }"
                    @click="changeInfo(item.name)"
                    v-for="(item, index) in zhuTiArray"
                    :key="item.id"
                    >{{ item.name }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <div class="geDanTags_list_right">
        <span
          class="geDanTags_list_span"
          @click="changeInfo(item.name)"
          :class="{
            geDanTags_list_span_active: tagsArray[index].name == tagsArrayName,
          }"
          v-for="(item, index) in tagsArray"
          :key="item.id"
          >{{ item.name }}</span
        >
      </div>
    </div>

    <div v-loading="domLoading">
      <div class="geDan_container_contact" v-infinite-scroll="load">
        <div
          class="geDan_container_contact_inside"
          v-for="item in playlistHighquality"
          :key="item.id"
          @click="goToGeDanInfo(item.id)"
        >
          <div
            class="geDan_container_contact_inside_pic"
            :style="[
              { 'background-image': 'url(' + item.coverImgUrl + ')' },
              { height: innerWidth === availWidth ? '200px' : '127px' },
            ]"
          >
            <div class="geDan_container_contact_inside_pic_head">
              <div class="bofang">
                <img src="../../../../assets/bf.png" />
                <span>{{ item.commentCount }}万</span>
              </div>
            </div>
            <div class="geDan_container_contact_inside_pic_name">
              <div class="yonghu">
                <img src="../../../../assets/yh.png" />
                <span>{{ item.creator.nickname }}</span>
              </div>
            </div>
          </div>
          <div class="geDan_container_contact_inside_text">
            {{ item.copywriter }}
          </div>
        </div>
      </div>
    </div>
    <p v-if="loading"><i class="el-icon-loading"></i>加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
import { highqualityTags, playlistHighquality } from "../../../../api/index";
import { commonJs } from "../../../../common/mixin/commonJs";
export default {
  mixins: [commonJs],
  created() {
    this.domLoading = true;
    highqualityTags().then((res) => {
      //yu zhong
      this.yuZhongArray = res.tags.slice(0, 5);

      //feng ge
      const arr2 = res.tags.slice(5, 9);
      const arr5 = res.tags.slice(14, 24);
      const arr7 = res.tags.slice(26, 33);
      this.fengGeArray = this.fengGeArray
        .concat(arr2)
        .concat(arr5)
        .concat(arr7);

      //chang jing
      this.changJingArray = res.tags.slice(9, 12);

      //qing gan
      this.qingGanArray = res.tags.slice(24, 26);

      //zhu ti
      this.zhuTiArray = res.tags.slice(12, 14);

      this.tagsArray = res.tags.slice(0, 10);

      if (this.$route.query.name) {
        this.tagsArrayName = this.$route.query.name;
        playlistHighquality({
          cat: this.$route.query.name,
          limit: 30,
        }).then((res) => {
          this.playlistHighquality = res.playlists;
          this.domLoading = false;
        });
      } else {
        this.tagsArrayName = this.tagsArray[0].name;
        playlistHighquality({
          cat: this.tagsArrayName,
          limit: 30,
        }).then((res) => {
          this.playlistHighquality = res.playlists;
          this.domLoading = false;
        });
      }

    });
  },
  data() {
    return {
      heights: 10,
      show: false,
      fengGeArray: [],
      yuZhongArray: [],
      changJingArray: [],
      qingGanArray: [],
      zhuTiArray: [],
      domLoading: false,
      tagsArray: [],
      tagsArrayName: "",
      tagValue: "",
      playlistHighquality: [],
      copyPlaylistHighquality: [],
      loading: false,
      noMore: null,
    };
  },
  methods: {
    goToGeDanInfo(id) {
      this.$router.push({
        path: "/geDanInfo",
        query: {
          id,
        },
      });
    },
    openPopu() {
      this.show = !this.show;
    },
    changeInfo(name) {
      this.show = false;
      this.domLoading = true;
      this.tagsArrayName = name;
      playlistHighquality({
        cat: this.tagsArrayName,
        limit: 30,
      }).then((res) => {
        this.playlistHighquality = res.playlists;
        this.domLoading = false;
      });
    },
    load() {
      console.log("load");
      if (this.noMore) {
        this.loading = false;
      } else {
        this.loading = true;
        playlistHighquality({
          cat: this.tagsArrayName,
          limit: 30,
          before:
            this.playlistHighquality[this.playlistHighquality.length - 1]
              .updateTime,
        }).then((res) => {
          this.playlistHighquality.push(...res.playlists);
          if (
            this.playlistHighquality.length !=
            this.copyPlaylistHighquality.length
          ) {
            this.copyPlaylistHighquality = JSON.parse(
              JSON.stringify(this.playlistHighquality)
            );
            this.loading = false;
          } else {
            this.loading = false;
            this.noMore = true;
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../common/css/commonStyle";

.geDan_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .geDan_container_head {
    width: 97%;
    display: flex;
    justify-content: space-between;

    .geDanTags_list_left {
      .select {
        width: 100px;
        height: 35px;
        border-radius: 50px;
        border: 1px solid rgb(221, 218, 218);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
      }
      .select:hover {
        background: rgb(221, 218, 218);
      }

      .allGeDan {
        width: 550px;
        height: 450px;
        position: absolute;
        z-index: 2;
        background: white;
        box-shadow: 0px 0px 10px #c5c0c0;

        .allGeDan_title {
          width: 96%;
          height: 50px;
          //background: yellow;
          border-bottom: 1px solid rgb(196, 194, 194);
          display: flex;
          align-items: center;
          font-size: 14px;
          padding-left: 20px;
          margin-bottom: 10px;
        }

        .allGeDan_container {
          height: 400px;
          width: 100%;

          .allGeDan_container_inside {
            width: 100%;
            //background: pink;
            display: flex;
            margin-bottom: 30px;

            .allGeDan_container_inside_left {
              width: 15%;
              height: 25px;
              //background: red;
              @include flex;
              color: rgb(206, 197, 197);

              .el-icon-chat-dot-round {
                font-size: 25px;
              }

              span {
                font-size: 14px;
              }
            }

            .allGeDan_container_inside_right {
              width: 85%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: center;

              span {
                font-size: 14px;
                width: 60px;
                height: 30px;
                cursor: pointer;
              }

              .geDanTags_list_span_active {
                color: $wangYiYunColor;
              }
            }

            .allGeDan_container_inside_other {
              display: flex;
              width: 30%;
              justify-content: space-between;
              align-items: center;

              span {
                font-size: 14px;
                cursor: pointer;
              }

              .geDanTags_list_span_active {
                color: $wangYiYunColor;
              }
            }
          }
        }
      }
    }

    .geDanTags_list_right {
      width: 55%;
      // background: red;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .geDanTags_list_span {
        font-size: 12px;
        color: rgb(119, 115, 115);
        cursor: pointer;
      }

      .geDanTags_list_span_active {
        color: $wangYiYunColor;
      }
    }
  }

  .geDan_container_contact::-webkit-scrollbar {
    display: none;
  }

  .geDan_container_contact {
    overflow: auto;
    margin-top: 30px;
    width: 97%;
    display: flex;
    flex-wrap: wrap;
    //height: 400px;

    .geDan_container_contact_inside {
      width: 17%;
      margin-bottom: 20px;
      cursor: pointer;
      margin-right: 22px;
      .geDan_container_contact_inside_pic {
        width: 100%;
        height: 127px;
        border-radius: 5px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .geDan_container_contact_inside_pic_head {
          padding-top: 1px;
          width: 100%;

          .bofang {
            display: flex;
            margin-top: 5px;

            span {
              font-size: 12px;
              color: white;
            }
          }
        }

        .geDan_container_contact_inside_pic_name {
          width: 100%;
          padding-left: 5px;

          .yonghu {
            display: flex;
            height: 20px;
            align-items: center;

            span {
              font-size: 12px;
              color: white;
            }
          }
        }
      }

      .geDan_container_contact_inside_text {
        @include white_space;
        width: 100%;
        margin-top: 10px;
        font-size: 14px;
      }
    }
  }
}

.el-select-dropdown__item.selected {
  color: $wangYiYunColor;
}
</style
>>
